<template>
  <span @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @contextmenu="handleContextMenu" v-html="content"></span>
</template>

<script>
/**
 * 1. 由isEdit去控制是否展示
 * 2. 传递change方法，用于改变isEdit
 * 3. 传递value，展示的可以传递给富文本，富文本编辑完成可以传递给展示的
 */
export default {
  props: ["content", "blockType", "currentOptIndex"],
  methods: {
    handleContextMenu(e) {
      e.preventDefault();
      // 打开
      this.$store.commit("editorAbout/SET_CONTENT", this.content);
      this.$store.commit("editorAbout/CHANGE_VISBLE");
      // 设置当前编辑的块是哪一块
      if (this.blockType == "opt") {
        this.$store.commit(
          "topicAbout/SET_CURRENTOPTINDEX",
          this.currentOptIndex
        );
      }
      this.$store.commit("topicAbout/SET_CURRENTEDITBLOCKTYPE", this.blockType);
    },
    handleMouseEnter(e){
      // console.log(e.target)
      e.target.classList.add('block-hover')
      e.target.innerText = '右键编辑'

    },
    handleMouseLeave(e){
      e.target.classList.remove('block-hover')
      e.target.innerText = this.content;
    }
  },
};
</script>

<style lang='less' scoped>
span{
  border: 1px solid transparent;
  transition: all .2s linear;
}
</style>